<html>
<head>
  <title>Speak Selection Options</title>
  <style>
    body {
      font-family: arial, helvetica, sans-serif;
    }
    .banner {
      width: 100%;
      float: left;
    }
    .banner_left {
      padding: 8px;
      float: left;
    }
    .banner_right {
      padding: 8px;
    }
    .body_wrapper {
      width: 100%;
      float: left;
    }
    .body_left {
      border: 0;
      padding: 0;
      margin: 0;
      width: 50%;
      float: left;
    }
    .body_right {
      border: 0;
      padding: 0;
      margin: 0;
      width: 46%;
      float: left;
    }
    .body_inner {
      padding: 0 32px;
    }
    .browser_action {
      vertical-align: middle;
      margin: 0 2px 3px 2px;
    }
    .ctrl_label {
      width: 100px;
      float: left;
    }
    .ctrl_wrap {
      margin: 18px 8px;
    }
    .ctrl {
      width: 200px;
    }
    #hotkey {
      font-size: 16px;
      width: 15em;
      margin-left: 12px;
    }
    #test {
    }
    #defaults {
      margin-left: 24px;
    }
  </style>
  <script src="keycodes.js"></script>
  <script src="tabs.js"></script>
  <script src="options.js"></script>
  <script src="content_script.js"></script>
</head>
<body>

<div class="banner">
  <div class="banner_left">
    <img src="SpeakSel128.png" class="logo" alt="">
  </div>
  <div class="banner_right">
    <h1>Speak Selection</h1>
    <p>
      This extension lets you use Chrome's text-to-speech (TTS) capabilities
      to speak any text you find on the web.
    </p>
  </div>
</div>

<div class="body_wrapper">
  <div class="body_left">
    <div class="body_inner">
      <h2>Speech Settings</h2>

      <div class="ctrl_label">
        <label for="voice">Voice:</label>
      </div>
      <div class="ctrl_wrap">
        <select id="voice" class="ctrl"></select>
      </div>

      <div class="ctrl_label">
        <label for="rate">Rate:</label>
      </div>
      <div class="ctrl_wrap">
        <input id="rate" type="range" class="ctrl"
               min=0.5 max=2.0 step=0.1 value=1.0></input>
      </div>

      <div class="ctrl_label">
        <label for="pitch">Pitch:</label>
      </div>
      <div class="ctrl_wrap">
        <input id="pitch" type="range" class="ctrl"
               min=0.5 max=1.5 step=0.1 value=1.0></input>
      </div>

      <div class="ctrl_label">
        <label for="volume">Volume:</label>
      </div>
      <div class="ctrl_wrap">
        <input id="volume" type="range" class="ctrl"
               min=0.0 max=1.0 step=0.1 value=1.0></input>
      </div>

      <div class="ctrl_label">
         &nbsp;
      </div>
      <div class="ctrl_wrap">
        <button id="test">Test Speech</button>
        <button id="defaults">Defaults</button>
      </div>

    </div>
  </div>
  <div class="body_right">
    <div class="body_inner">
      <h2>When to speak</h2>
      <p>
        <span id="selected">Select some text</span>
        anywhere on a webpage, then either:
      </p>

      <p>1. Click on the
        <img class="browser_action" src="SpeakSel19.png" alt="Speak Selection">
        button in the toolbar &#x2197;, or
      </p>

      <p>2. Use this hot key: <input type="text" id="hotkey"></input>
      </p>
      <p>Click the button or press the key again to stop speech.</p>
    </div>
  </div>
</div>

</body>
</html>
